<template>
    <div style="padding-top: 1px">
        <div class="song-list">
            <ul class="song-list-header">
                <li v-for="(item, index) in songStyle" :key="index"
                    @click="goSongListOfStyle(item.name)"
                    :class="{active: item.name == activeName}">
                    {{item.name}}
                </li>
            </ul>
            <div>
                <content-list :content-list="data"></content-list>
                <div class="pagination">
                    <el-pagination
                            @current-change="handleCurrentChange"
                            background
                            layout="total, prev, pager, next"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            :total="albumDatas.length">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import ContentList from "@/components/ContentList";
import {getAllSongList, getSongListLikeStyle} from "@/api";
import {mixin} from "@/mixins";
import {songStyle} from "@/assets/data/songList";

export default {
    name: "SongList",
    mixins: [mixin],
    components: {ContentList},
    data(){
        return{
            albumDatas: [],     //歌单数据
            pageSize: 10,       //页面数据数量，一页有15条数据
            currentPage: 1,     //当前页，默认第一页
            songStyle: [],      //歌单的风格
            activeName: '全部歌单',     //当前风格
        }
    },
    computed:{
        //计算当前表格中的数据
        data(){
            return this.albumDatas.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
        }
    },
    mounted(){
        this.songStyle = songStyle;
        this.getSongList();
    },
    methods:{
        getSongList(){
            getAllSongList(this.$route.query.keywords)
                .then(res => {
                    this.currentPage = 1;
                    this.albumDatas = res;
                });
        },
        //获取当前页
        handleCurrentChange(val){
            this.currentPage = val;
        },
        //根据style查询对应的歌单
        goSongListOfStyle(name){
            this.activeName = name;
            this.albumDatas = [];
            if(name == '全部歌单'){
                this.getSongList();
            }else{
                this.handleChangeView(name);
            }
        },
        //根据style查询对应的歌单
        handleChangeView(style){
            getSongListLikeStyle(style).then(res => {
                this.currentPage = 1;
                this.albumDatas = res;
            })
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../assets/css/song-list";
</style>